import * as React from 'react';
import * as StringHelper from '../MyHelper/StringHelper';
import * as Global from '../TS/Global';
import { MessageBox } from './messagebox';
import * as MyCfg from './MyCfg';
import { Netcfg } from './netcfg';

export interface NetCfgListProps extends Global.Myprops {
    ttxx?: string,
    Cfglist: MyCfg.MsgCfg_net[],
    IsSetDNS?: boolean,
    DNS1?: string,
    DNS2?: string
};

interface NetCfgListState {

    Cfglist: MyCfg.MsgCfg_net[];
    Ischeck: Boolean;
    DNS1?: string;
    DNS2?: string;
    IsSetDNS?: boolean;
    DNS1_check?: boolean;
    DNS2_check?: boolean;

};

export class NetCfgList extends React.Component<NetCfgListProps,
    NetCfgListState> {
    constructor(props) {
        super(props);
        // console.log("constructor:" + props);

        //设置状态
        this.state = {
            Cfglist: props.Cfglist,
            Ischeck: true,
            DNS1: props.DNS1,
            DNS2: props.DNS2,
            IsSetDNS: props.IsSetDNS,
            DNS1_check: true,
            DNS2_check: true
        };
        console.log("componentDidMount:");
        console.log(this.state);
    }
    //下一步进行显示 进行初始化
    componentDidMount() {
        //类似window.onload
        this.setState((prv, propc) => ({
            Cfglist: propc.Cfglist,
            Ischeck: true,
            DNS1: propc.DNS1,
            DNS2: propc.DNS2,
            IsSetDNS: propc.IsSetDNS,
            DNS1_check: true,
            DNS2_check: true
        }), () => {
            console.log("componentDidMount:");
            console.log(this.state);
        });


    }
    componentWillReceiveProps(nextProps) {
        //每次父控件重新绘制,赋值新的props触发
        this.setState({ Cfglist: nextProps.Cfglist });
    }
    CheckInput() {

        let _ischeck: boolean = true;
        for (var n = 0; n < this.state.Cfglist.length; n++) {
            // var element = array[n];
            let tmp: any = this.refs["netcfgview" + n];
            // console.log(tmp.GetState());

            if (tmp.GetCheck() == false)
                _ischeck = false;
        }
        if (!(this.state.DNS1_check && this.state.DNS2_check)) {
            _ischeck = false;
        }
        this.setState({ Ischeck: _ischeck });
    }
    public handleClick(e: any): void {
        if (e.target.name == "saveall") {
            console.log("saveall");
            MyCfg.mycfg.DNS1 = this.state.DNS1;
            MyCfg.mycfg.DNS2 = this.state.DNS2;
            MyCfg.mycfg.IsSetDNS = this.state.IsSetDNS;
            for (var n = 0; n < this.state.Cfglist.length; n++) {
                // var element = array[n];
                let tmp: any = this.refs["netcfgview" + n];
                // console.log(tmp.GetState());

                MyCfg.mycfg.Net_cfg[n] = tmp.GetState();

            }
        } else { }
        let msgbox: any = this.refs.messagebox;
        msgbox.Show();

    }
    public handleChange(event: any): void {

        let tcfg: any = {};
        let value: any;
        let isset: boolean = false;
        if (event.target.type == "checkbox") {

            tcfg[event.target.name] = event.target.checked;
            isset = true;
        } else if (event.target.type == "radio") {
            if (event.target.checked) {

                tcfg[event.target.name] = event.target.value;
                isset = true;
            }

        } else if (event.target.type == "select-one") {
            // <option value='0'>全部</option>
            var index = event.target.selectedIndex;
            value = event.target.options[index].value;

        } else {
            value = event.target.value;
        }
        if (!isset) {

            tcfg[event.target.name] = value;
        }


        let namexxx = event.target.name;
        if (namexxx == "DNS1" || namexxx == "DNS2") {
            tcfg[namexxx + "_check"] = true;
            console.log("checkd");
            if (!StringHelper.IsIP(event.target.value)) {

                console.log("uncheckd");
                tcfg[namexxx + "_check"] = false;
            }
        }

        let _Ischeck: boolean = false;
        if (this.state.DNS1_check && this.state.DNS2_check) {
            _Ischeck = true;
        }
        tcfg["Ischeck"] = _Ischeck;
        // console.log(tcfg);
        this.setState(tcfg, () => {
            this
                .CheckInput();
        });
    }

    public render(): JSX.Element {
        let netcfgviews = [];
        for (var n = 0; n < this.state.Cfglist.length; n++) {
            netcfgviews.push(<Netcfg
                index={n}
                viewparent={this}
                cfg={this.state.Cfglist[n]}
                ref={`${"netcfgview" + n}`} />);
            if (n % 2 == 1) {
                netcfgviews.push(
                    <div className="clearfix visible-sm visible-md visible-lg"></div>
                );
            }
        }
        let panelclassname: string = '';
        panelclassname = "panel " + (this.state.IsSetDNS
            ? 'panel-info '
            : 'panel-danger ');
        return (
            <div className="col-xs-12 col-sm-10">
                <div className="panel panel-default">
                    <div className="panel-heading">
                        <h3 className="panel-title">{Global.GetLocal("网口参数设置")}
                        </h3>



                    </div>
                    <div className="panel-body">

                        {netcfgviews}

                        <div className={panelclassname}>
                            <div className="panel-heading">
                                <h3 className="panel-title">DNS&nbsp;   &nbsp;
                                <label>

                                        <input type="checkbox" checked={this.state.IsSetDNS}
                                            name="IsSetDNS"
                                            onChange={e => this.handleChange(e)}>
                                        </input>
                                        {Global.GetLocal("启用")}

                                    </label></h3>



                            </div>
                            <div className="panel-body">
                                <div className="form-group">

                                    <label className="col-xs-4 control-label">DNS1</label>
                                    <div
                                        className={this.state.DNS1_check
                                            ? "col-xs-8 "
                                            : "col-xs-8 has-error has-feedback"}>
                                        <input
                                            type="text"
                                            className="form-control"
                                            placeholder=" "
                                            name="DNS1"
                                            value={this.state.DNS1}
                                            onChange={e => this.handleChange(e)}
                                        />
                                        <span
                                            className={this.state.DNS1_check
                                                ? "hidden"
                                                : "glyphicon glyphicon-remove form-control-feedback"}></span>
                                        <br
                                            className={this.state.DNS1_check
                                                ? "hidden"
                                                : ""} />
                                        <div
                                            className={this.state.DNS1_check
                                                ? "alert alert-danger hidden"
                                                : "alert alert-danger "}
                                            role="alert">{Global.GetLocal("DNS错误")}</div>

                                    </div>
                                </div>
                                <div className="form-group">

                                    <label className="col-xs-4 control-label">DNS2</label>
                                    <div
                                        className={this.state.DNS2_check
                                            ? "col-xs-8 "
                                            : "col-xs-8 has-error has-feedback"}>
                                        <input
                                            type="text"
                                            className="form-control"
                                            placeholder=" "
                                            name="DNS2"
                                            value={this.state.DNS2}
                                            onChange={e => this.handleChange(e)}
                                        />
                                        <span
                                            className={this.state.DNS2_check
                                                ? "hidden"
                                                : "glyphicon glyphicon-remove form-control-feedback"}></span>
                                        <br
                                            className={this.state.DNS2_check
                                                ? "hidden"
                                                : ""} />
                                        <div
                                            className={this.state.DNS2_check
                                                ? "alert alert-danger hidden"
                                                : "alert alert-danger "}
                                            role="alert">{Global.GetLocal("DNS错误")}</div>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <MessageBox
                        ref="messagebox"
                        MessageType='alert'
                        Title={Global.GetLocal("提醒")}
                        Content={Global.GetLocal("保存配置成功")} />
                    <div className="panel-footer">
                        <button
                            type="submit"
                            name="saveall"
                            className="btn btn-primary btn-lg  center-block"
                            disabled={!this.state.Ischeck}
                            onClick={e => this.handleClick(e)}>{Global.GetLocal("保存")}</button>
                    </div>

                </div>
            </div>
        );
    }
}